<script setup>
import { ref, reactive } from 'vue';
import Child from './Child.vue';

const color = ref('red');
const data = reactive({
  name: 'unionDrug',
});
const changeColor = () => {
  color.value = color.value === 'red' ? 'yellow' : 'red';
};

setTimeout(() => {
  color.value = 'green';
}, 2000);
</script>

<template>
  <p>Props</p>
  <div>
    <Child
      :color="color"
      :data="data"
    />
    <button @click="changeColor">
      改变color,如果不添加toRef不会更改
    </button>
  </div>
</template>
